<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../CSS/FirstClassTask.css"/>
		<style type="text/css">
		.head {
    		position: relative;
    		height: 58px;
   	  	 	-webkit-font-smoothing: antialiased;
		/*}
		body {
		    font: 14px;
		    color: #333;
		    background-color: #fff;
		    min-width: 1226px;
		}
		.title {
			    margin: 0;
			    font-size: 22px;
			    font-weight: 200;
			    line-height: 58px;
			    color: #333;
		}
		h2 {
		    display: block;

		}
		div {
            display: block;
		}*/
		.tu-left {
		    width: 234px;
		    margin-left: 14px;
		    min-height: 1px;
		    border: 1px dotted gray;	
		 }
		 /*.tu-right {
		    width: 978px;
		    float: left;
		    margin-left: 14px;
		    min-height: 1px;
		}
		.tu-right-nei{
			margin: 0 0 -14px -14px;
			width: 992px;
			height: 614px;
			padding: 0;
   			list-style-type: none;
		}
		ul {
		    display: block;
		}
		.tu{
		    position: relative;
		    z-index: 1;
		    float: left;
		    width: 234px;
		    margin-left: 14px;
		    margin-bottom: 14px;
		    background: #fff;
		    transition: all .2s linear;
		}*/
		li {
		    display: list-item;
		    text-align: -webkit-match-parent;
		}
		.center{
			width: 1200px;
			height: 620px;
			margin: 0 auto;
		}
		html{
			
    		-webkit-text-size-adjust: 100%;

		}
		</style>
	</head>
	<body>
	<div class="head">
		<h2 class="title">手机</h2>		
	</div>
	<div class ="center">
		<div class="row">
			<div class="tu-left">
				<ul class="tu1">
					<li class="tu-1"></li>
				</ul>
			</div>
		<div class="tu-right">
			<ul class="tu-right-nei">
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="Xiaomi MIX 4" src="../img/1.jpg"/>
					</div>
					<h3 class="title2">" Xiaomi MIX 4 "</h3>
					<p class="screen">CUP全面屏</p>
					<p class="price">
						<span class="price1">4999</span>
						"元"
						<span>起</span>
					</p>
				</li>
				
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="Xiaomi MIX 4" src="../img/1.jpg"/>
					</div>
					<h3 class="title2">" Xiaomi MIX 4 "</h3>
					<p class="screen">CUP全面屏</p>
					<p class="price">
						<span class="price1">4999</span>
						"元"
						<span>起</span>
					</p>
				</li>
				
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="Note 10 Pro" src="../img/2.jpg"/>
					</div>
					<h3 class="title2">" Note 10 Pro "</h3>
					<p class="screen">天玑1100年度旗舰芯</p>
					<p class="price">
						<span class="price1">1599</span>
						"元"
						<span>起</span>
						<del>
							<span class="price1">1699</span>
							"元"
						</del>
					</p>
				</li>
				
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="Redmi Note 10 5G" src="../img/3.jpg"/>
					</div>
					<h3 class="title2">" Redmi Note 10 5G "</h3>
					<p class="screen">5G小金刚|旗舰长续航</p>
					<p class="price">
						<span class="price1">1099</span>
						"元"
						<span>起</span>
					</p>
				</li>
				
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="小米MIX FOLD" src="../img/4.jpg"/>
					</div>
					<h3 class="title2">" 小米MIX FOLD "</h3>
					<p class="screen">折叠大屏|自研芯片</p>
					<p class="price">
						<span class="price1">9999</span>
						"元"
						<span>起</span>
					</p>
				</li>
				
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="小米11 Ultra" src="../img/5.jpg"/>
					</div>
					<h3 class="title2">" 小米11 Ultra "</h3>
					<p class="screen">1/1.12''GN2|2K四微曲屏</p>
					<p class="price">
						<span class="price1">5499</span>
						"元"
						<span>起</span>
						<del>
							<span class="price1">5999</span>
							"元"
						</del>
					</p>
				</li>
				
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="小米11 Pro" src="../img/6.jpg"/>
					</div>
					<h3 class="title2">" 小米11 Pro "</h3>
					<p class="screen">1/1.12''GN2|骁龙888</p>
					<p class="price">
						<span class="price1">4499</span>
						"元"
						<span>起</span>
						<del>
							<span class="price1">4999</span>
							"元"
						</del>
					</p>
				</li>
				
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="小米11 青春版" src="../img/7.jpg"/>
					</div>
					<h3 class="title2">" 小米11 青春版 "</h3>
					<p class="screen">小米11 青春版 轻薄</p>
					<p class="price">
						<span class="price1">1999</span>
						"元"
						<span>起</span>
						<del>
							<span class="price1">2299</span>
							"元"
						</del>
					</p>
				</li>
				
				<li class="tu"></li>
				<li>
					<div class="img">
						<img width="160" height="160" alt="K40 游戏增强版" src="../img/8.jpg"/>
					</div>
					<h3 class="title2">" K40 游戏增强版 "</h3>
					<p class="screen">轻薄电竞设计</p>
					<p class="price">
						<span class="price1">1999</span>
						"元"
						<span>起</span>

					</p>
				</li>
			</ul>
		</div>	
			
		</div>
	</div>
	</body>
</html>